<template>
    <div class="main-box-right">
                <div class="main-box-right-top">
                    <h2>个人信息</h2>
                    <p>实名认证</p>
                    <div class="main-box-right-part">
                        <p>身份证正面</p>
                        <button @click="$refs.file1.click();">选择图片</button>
                        <img :src="imgurl1" class="img zhengImg" >
                        <input type="file" ref="file1" style="display:none;" @change="uploadfront">
                    </div>
                    <div class="main-box-right-part">
                        <p>身份证反面</p>
                        <button @click="$refs.file2.click()">选择图片</button>
                        <img :src="imgurl2" class="img fanImg" >
                        <input type="file" ref="file2" style="display:none;"  @change="uploadback">
                    </div>

                    <el-button type="primary" @click="upload">上传</el-button>
                </div>
    </div>
</template>

<script>
import {getuserInfo} from '../../../api/personalData/information/editInformation'
import cookie from '../../cookie/index'
import jwtDecode from 'jwt-decode'
import {uploadIDcard} from '../../../api/personalData/information/editInformation'
export default {
    name:'IDCard',
    data() {
        return {
            frontfile:'',
            backfile:'',
            userinfo:{},
            imgurl1:'',
            imgurl2:'' ,

        }
    },
    methods:{
      uploadfront(e){
        const file = e.target.files[0]
        this.frontfile= file
        const src = window.URL.createObjectURL(file)
        this.imgurl1 = src
        console.log(src);
      },
      uploadback(e){
        const file = e.target.files[0]
        this.backfile= file
        const src = window.URL.createObjectURL(file)
        this.imgurl2 = src
        console.log(src);
      },
      // 上传
      upload(){
        const formdata = new FormData();
        formdata.append("front", this.frontfile);
        formdata.append("back", this.frontfile);
        uploadIDcard({userId:this.userinfo.userId},formdata).then(data=>{
              const list = data.data.message
              if(list === '成功'){
                  this.$message({
                        type: "success",
                        message: "成功!"
                    })
                    this.getUserinfo();
                    console.log(data);
              }
        })
        //  this.$http({
        //         url:'/shopper/store/authentication',
        //         method:'post',
        //         data:formdata,
        //         params:{userId:this.userinfo.userId},
        //         maxContentLength:Infinity,
        //         maxRedirects:5,
        //         maxBodyLength:Infinity,
        //         headers: { 'Authorization': cookie.getToken() }
        //     }).then(data => {
        //       const list = data.data.message
        //       if(list === '成功'){
        //           this.$message({
        //                 type: "success",
        //                 message: "成功!"
        //             })
        //             this.getUserinfo();
        //             console.log(data);
        //       }
        //     }).catch(err => {
        //         console.log(err);
        //     })
      },
    //   获取用户数据
      getUserinfo(){
         const user = jwtDecode(cookie.getToken());
         getuserInfo({userId:user.userId}).then(data=>{
            const list =data.data.data
             this.userinfo = list
             console.log('@@',list);
        })
      }
    },
    created(){
        this.getUserinfo()
    }
}
</script>

<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
 button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            height: 40px;
            width: 82px;
            cursor: pointer;
            margin-top: 50px;
            margin-left:300px ;
             margin-bottom:20px ;
            transform: translateX(50%);
          }
.main-box-right {
      margin-left: 20px;
      float: left;
      width: 900px;
      border-radius: 4px;
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      position: relative;
      .main-box-right-top {
        width: 100%;
        // height: 90px;
        h2 {
          margin-top: 10px;
          font-weight: 400;
          padding: 12px 30px;
          font-size: 20px;
        }
        p {
          font-size: 14px;
          padding-left: 32px;
          margin-bottom: 20px;
          color: #838383;
        }
        .main-box-right-part {
          width: 90%;
          height: 300px;
          margin: 0 auto;
          border-top: 1px solid #d6d6d6;
          border-bottom: 1px solid #d6d6d6;
          position: relative;
          p {
            width: 103px;
            display: inline-block;
            text-align: right;
            line-height: 300px;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            &::after {
              content: "";
              height: 100%;
              padding-right: 30px;
              border-right: 2px solid #d6d6d6;
            }
          }
          span {
            margin-left: 30px;
            font-size: 12px;
            color: #666666;
            line-height: 40px;
          }
          button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            float: right;
            height: 40px;
            width: 82px;
            cursor: pointer;
            margin-top: 120px;
            margin-right: 100px;
            text-align: center;
          }
          .img {
            cursor: pointer;
            width: 350px;
            height: 211px;
            position: absolute;
            top: 43px;
            left: 250px;
          }
          .zhengImg{
            background-image: url();
          }
        }
      }
    }
</style>